<template>
	<el-container>
		<el-aside width="40%">
            <div class="container">
                <div class="top">
                    <div class="text">第一步. <span>单击行选择商品</span></div>
                    <div class="left-panel">
                        <div>
                
                            <span class="text" style="margin-right: 10px;">商品类别</span>
                            <el-cascader v-model="form.type" :options="depts" :props="deptsProps" clearable style="width: 70%"></el-cascader>
                        </div>
                        <el-input v-model="form.keywords" style="width: 25%;margin:0 10px" placeholder="商品编码/名称/助记码"></el-input>
                        <el-cascader v-model="form.type" :options="depts" :props="deptsProps" clearable style="width: 25%"></el-cascader>
                        <div class="btn" style="margin-bottom:0">查询</div>
                    </div>
                    <div class="btn">批量为商品添加物料和工序工序<el-icon size="14"><el-icon-CaretBottom /></el-icon></div>
                </div>
                <el-card shadow="never">
                    <scTable ref="table" :data="tableData" row-key="id" stripe hideDo>
                        <el-table-column type="selection" width="30"></el-table-column>
                        <el-table-column label="编号" prop="id"  width="50" align="center"></el-table-column>
                        <el-table-column label="商品编号" prop="goodsID" width="90" align="center"></el-table-column>
                        <el-table-column label="商品名称" prop="goodsName" width="90" align="center"></el-table-column>
                        <el-table-column label="规格型号" prop="spec" width="90" align="center"></el-table-column>
                        <el-table-column label="物料清单" prop="inventory" width="90" align="center">
                            <template #default="scope">
                                <div v-if="scope.row.inventory=='未设置'" style="color:#ed5565">{{scope.row.inventory}}</div>
                                <div v-else style="color:#018052">{{scope.row.inventory}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="生产工序" prop="produce" width="90" align="center">
                            <template #default="scope">
                                <div v-if="scope.row.inventory=='未设置'" style="color:#ed5565">{{scope.row.inventory}}</div>
                                <div v-else style="color:#018052">{{scope.row.inventory}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" prop="status" width="90" align="center">
                            <template #default="scope">
                            <div v-if="scope.row.status=='无效'" style="color:#ed5565">{{scope.row.status}}</div>
                            <div v-else style="color:#018052">{{scope.row.status}}</div>
                        </template>
                        </el-table-column>
                        <el-table-column label="品牌" prop="brand" width="90" align="center"></el-table-column>
                        <el-table-column label="条形码" prop="qrcode" width="90" align="center"></el-table-column>
                    </scTable>
                </el-card>
            </div>
		</el-aside>
        <div class="container">
            <div class="top">
                <div class="right">
                    <div class="text">第二步. <span>为选中的商品设置物料及工序</span></div>
                    <div class="red">通过商品类别批量设置</div>
                </div>
                <div class="left-panel">
                    <div class="display">
                        <span class="text" style="margin-right: 10px;">商品类别</span>
                        <el-input v-model="form.keywords" style="width: 70%;" readonly></el-input>
                    </div>
                    <div class="display">
                        <span class="text" style="margin-right: 10px;">商品名称</span>
                        <el-input v-model="form.keywords" style="width: 70%;" readonly></el-input>
                    </div>
                    <div class="display">
                        <span class="text" style="margin-right: 10px;">所需费用</span>
                        <el-input v-model="form.keywords" style="width: 70%;" readonly></el-input>
                    </div>
                </div>
                
            </div>
            <el-tabs tab-position="top">
                <el-tab-pane label="1.所需物料">
                    <div class="btns">
                        <div class="button" style="background: #11d1b0">添加物料<el-icon size="14"><el-icon-CaretBottom /></el-icon></div>
                        <div class="button" style="background: #2666f9">复制<el-icon size="14"><el-icon-CaretBottom /></el-icon></div>
                        <div class="button" style="background: #f89939">删除</div>
                        <div class="button" style="background: #11d1b0">导入</div>
                        <div class="button" style="background: #11d1b0">导出</div>
                    </div>
                   <el-card shadow="never">
                    <scTable ref="table" :data="tableData" row-key="id" stripe>
                        <el-table-column type="selection" width="30"></el-table-column>
                        <el-table-column label="编号" prop="id"  width="50" align="center"></el-table-column>
                        <el-table-column label="操作" width="100" align="center">
                        <template #default="scope">
                            <div class="btnDisplay">
                                <el-icon size="18" class="btn" @click="handleProcess(scope.row)"><el-icon-Edit /></el-icon>
                                <el-icon size="18" class="btn" @click="handleProcess(scope.row)"><el-icon-Delete color="#f89939" /></el-icon>
                            </div>
                        </template>
                        </el-table-column>
                        <el-table-column label="编号" prop="goodsID" width="90" align="center"></el-table-column>
                        <el-table-column label="名称" prop="goodsName" width="90" align="center"></el-table-column>
                        <el-table-column label="规格" prop="spec" width="90" align="center"></el-table-column>
                        <el-table-column label="所需数量" prop="useNumber" width="90" align="center"></el-table-column>
                        <el-table-column label="损耗率" prop="lossRate" width="90" align="center"></el-table-column>
                        <el-table-column label="单价" prop="price" width="90" align="center"></el-table-column>
                        <el-table-column label="费用" prop="qrcode" width="90" align="center"></el-table-column>
                        <el-table-column label="品牌" prop="brand" width="90" align="center"></el-table-column>
                    </scTable>
                </el-card>
                </el-tab-pane>
                <el-tab-pane label="2.生产工序">

                </el-tab-pane>
                <el-tab-pane label="3.加工费用">

                </el-tab-pane>
            </el-tabs>
        </div>
	</el-container>
</template>

<script>
	export default {
		name: 'listSon',
		data() {
			return {
				form: {
                    type: "",
                    keywords:""
                },
                tableData: [
                    {
                        id: 0,
                        goodsID:"SD15685",
                        goodsName: "名称1",
                        spec:"无",
                        inventory: "已设置",
                        produce:"已设置",
                        status: "有效",
                        brand: "无",
                        qrcode:54695,
                        price:11111,
                        lossRate:"10%",
                        useNumber:100
                    },
                    {
                        id: 1,
                        goodsID:"WA78941",
                        goodsName: "名称2",
                        spec:"无",
                        inventory: "未设置",
                        produce: "未设置",
                        status: "无效",
                        brand: "无",
                        qrcode:54695,
                        price:22222,
                        lossRate:"10%",
                        useNumber:200
                    },
                ],
			}
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
.container{
    margin: 15px;
    font-size: 16px;
    .top{
        .text{
            span{
                font-size: 14px;
            }
        }
        .left-panel{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 20px 0 40px;
            .btn{
                background: #11d1b0;
                color: #fff;
                padding: 5px;
                border-radius: 8px;
                width: 100px;
                text-align: center;
                cursor: pointer;
            }
            .display{
                display: flex;
                align-items: center;
            }
        }
         .btn{
            background: #11d1b0;
            color: #fff;
            padding: 10px 20px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 280px;
            margin-bottom: 10px;
            cursor: pointer;
        }
    }
    .right{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .red{
            background: #f5605a;
            color: #FFF;
            padding: 5px;
            border-radius: 8px;
            text-decoration: underline;
            cursor: pointer;
        }
    }
    .btns{
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .button{
            padding: 10px;
            color: #fff;
            margin: 0 5px;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    }
}
.btnDisplay {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .btn {
        color: #2666f9;
        margin: 0 5px;
    }
}
</style>
